<template>
  <el-row :gutter="10">
    <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5"
      ><div class="grid-content"></div
    ></el-col>
    <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14"
      ><div class="grid-content bg-purple">
        <el-container>
          <el-header width="100%" style="text-align: right; font-size: 12px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="视频投稿" name="first"></el-tab-pane>
              <el-tab-pane label="互动视频投稿" name="second"></el-tab-pane>
              <el-tab-pane label="贴纸投稿" name="third"></el-tab-pane>
              <el-tab-pane label="视频素材投稿" name="fourth"></el-tab-pane>
            </el-tabs>
          </el-header>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="添加视频">
              <div style="width: 90%">
                <el-upload
                  class="upload-demo"
                   drag
                  action="http://localhost:3000/video"
                   multiple
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :on-change="onchange"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="imageUrl"
                    ref="phoUrl"
                    :src="imageUrl"
                    class="avatar"
                    width="180"
                    height="180"
                  />
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <div style="width: 90%">
                <el-input v-model="ruleForm.title"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="分区" prop="subarea">
              <el-select v-model="ruleForm.subarea" placeholder="请选择分区">
                <el-option label="生活" value="life"></el-option>
                <el-option label="游戏" value="game"></el-option>
                <el-option label="娱乐" value="play"></el-option>
                <el-option label="美食" value="food"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="选择标签" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="VLOG" name="type"></el-checkbox>
                <el-checkbox label="自制" name="type"></el-checkbox>
                <el-checkbox label="学习" name="type"></el-checkbox>
                <el-checkbox label="小视频" name="type"></el-checkbox>
                <el-checkbox label="生活记录" name="type"></el-checkbox>
                <el-checkbox label="旅游" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="参与活动" prop="activity">
              <el-radio-group v-model="ruleForm.activity">
                <el-radio label="国风奇妙纪"></el-radio>
                <el-radio label="我的夏日活动记录"></el-radio>
                <el-radio label="暑假充电计划"></el-radio>
                <el-radio label="夏日学习打卡"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="简介" prop="v_text">
              <div style="width: 90%">
                <el-input type="textarea" v-model="ruleForm.v_text"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-container>
      </div></el-col
    >
    <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5"
      ><div class="grid-content"></div
    ></el-col>
  </el-row>
</template>
<style scoped>
.el-header {
  background-color: #dddddd;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #f0f0f0;
}
.bg-purple-light {
  background: #e9e9e9;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  path: "/videoSubmission",
  components: {},
  data() {
    return {
      video: [],
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      activeName: "first",
      //表单
      ruleForm: {
        title: "",
        subarea: "",
        delivery: false,
        type: [],
        activity: "",
        Date: new Date(),
        v_status: 1,
        v_text: "",
        submitForm: "",
        token: window.sessionStorage.getItem("token"),
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        subarea: [{ required: true, message: "请选择分区", trigger: "change" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个标签",
            trigger: "change",
          },
        ],
        activity: [
          { required: true, message: "请选择参与活动", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Hclick();
          console.log(JSON.stringify(this.ruleForm));
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Hclick() {
      this.$api.__api_list_video_post(this.ruleForm).then((data) => {
        JSON.stringify(this.ruleForm);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name === "first") {
        this.$router.push("/Submission/videoSubmission");
      } else if (tab.name === "second") {
        this.$router.push("/Submission/activeSubmission");
      } else if (tab.name === "third") {
        this.$router.push("/Submission/pasterSubmission");
      } else if (tab.name === "fourth") {
        this.$router.push("/Submission/videoMaterial");
      }
    },
    //上传头像,
    handleAvatarSuccess(res, file) {
      this.pho = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //当上传图片后，调用onchange方法，获取图片本地路径
    onchange(file, fileList) {
      let _this = this;
      let event = this.event || window.event;
      file = event.target.files[0];
      let reader = new FileReader();

      //转base64
      reader.onload = function (e) {
        _this.imageUrl = e.target.result; //将图片路径赋值给src
        console.log(_this.imageUrl);
        //JSON.stringify(_this.imageUrl);
        this.ruleForm.header = _this.imageUrl;
        // _this.$refs.imageUrl=e.target.result//获取pho的src
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>
